<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初始VUE</title>
    <!-- 引用开发版 -->
    <!-- <script type="text/javascript" src="../js/vue.js"></script> -->
</head>
<body>
    <!-- 准备一个容器 -->
    <div id="message">
    </div>

    <script type="text/javascript">
        if(window.EventSource) {
            let source = new EventSource('http://127.0.0.1:8080/sse/createSse?sseId=1');
            let innerHtml = '';
            source.onopen = function(e) {
                console.log(e)
                innerHTML += "onopen：准备就绪，可以开始接收服务器数据" + "<br/>"; //支付结果
                document.getElementById("message").innerHTML = innerHTML;
            };
            //监听服务器端发来的事件：message
        source.onmessage = function(e) {
            console.log(e)
            innerHTML += "onmessage:" + e.data + "<br/>"; //支付结果
            document.getElementById("message").innerHTML = innerHTML;
        };
        //自定义finish事件，主动关闭EventSource
        source.addEventListener('finish', function(e) {
            console.log(e)
            source.close();
            innerHTML += "支付结果接收完毕，通知服务端关闭EventSource" +  "<br/>";
            document.getElementById("message").innerHTML = innerHTML;
        }, false);

        //监听服务器端发来的事件：error
        source.onerror = function(e) {
            if (e.readyState === EventSource.CLOSED) {
                innerHTML += "sse连接已关闭" +  "<br/>";
            } else {
                console.log(e);
            }
        };
        } else{
            console.log('你的浏览器不支持SSE')
        }
    </script>
</body>
</html>